<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="addForm">
      <el-form-item label="属性名" prop="attrName">
        <el-input
          style="width: 300px"
          v-model="ruleForm.attrName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="attrValueList">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small "
          style="margin-top: 20px"
          @click="addAttrValue"
        >
          添加属性值
        </el-button>

        <el-table
          :data="ruleForm.attrValueList"
          border
          style="width: 100%; margin: 20px 0"
        >
          <el-table-column label="序号" type="index" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="attrValueName"
            label="属性值名称"
            align="center"
          >
            <template slot-scope="{ row, $index }">
              <el-input
                style="width: 100%"
                v-model="row.valueName"
                v-show="row.isEdit"
                @blur="toLook(row)"
                autocomplete="off"
                :ref="$index"
              ></el-input>
              <div v-show="!row.isEdit" @click="toEdit(row, $index)">
                {{ row.valueName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="{ row, $index }">
              <el-popconfirm
                title="确定删除吗？"
                @onConfirm="removeAttrValue($index)"
              >
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  style="color: red"
                  slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      size="min"
      style="margin-top: 20px"
      @click="addOrUpdate"
    >
      确认
    </el-button>
    <el-button size="min" style="margin-top: 20px" @click="cancel">
      取消
    </el-button>
  </div>
</template>

<script>
import { saveAttrInfoApi } from "@/api/product/attr/attr";
export default {
  name: "AddOrUpdateAttr",
  props: {
    category3Id: Number,
    setAttr: Object,
  },
  data() {
    const { attrName, attrValueList,id } = this.setAttr;
    return {
      ruleForm: {
        attrName:attrName||'',
        attrValueList:attrValueList||[],
        id: id||undefined,
      },
      rules: {
        attrName: [
          { required: true, message: "请输入属性名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    //取消切换页面
    cancel() {
      this.$emit("ShowList");
    },
    //点击添加属性值
    addAttrValue() {
      let attrValue = {

        valueName: "",
      };
      this.$set(attrValue, "isEdit", true);
      console.log(this.ruleForm.attrValueList)
      this.ruleForm.attrValueList.push(attrValue);
      this.$nextTick(() => {
        this.$refs[this.ruleForm.attrValueList.length-1].focus();
      });
    },
    //编辑模式
    toEdit(row, index) {
      this.$set(row, "isEdit", true);
      this.$nextTick(() => {
        this.$refs[index].focus();
      });
    },
    //显示模式
    toLook(row) {
      // console.log(row)
      const valueName = row.valueName;
      //输入的数据已存在不进入显示模式
      const isRepeat = this.ruleForm.attrValueList.some((item) => {
        //添加属性功能是往里面push对象，很有可能匹配到自己
        if (item !== row) {
          return item.valueName === valueName;
        }
      });
      if (isRepeat) {
        this.$message.info("属性值已存在,请重新输入!!!");
        return;
      }
      //
      if (valueName) {
        row.isEdit = false;
        return;
      }
      this.ruleForm.attrValueList = this.ruleForm.attrValueList.filter(
        (item) => {
          return item.valueName !== "";
        }
      );
      this.$message.info("属性值名称不能为空!!!");
    },
    //删除属性值
    removeAttrValue(index) {
      this.ruleForm.attrValueList.splice(index, 1);
    },
    //添加或更新属性列表
    addOrUpdate() {
      // console.log(this.$attrs)
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          const { attrName, attrValueList,id } = this.ruleForm;
          
          /* {
            attrName: "string",
            attrValueList: [
              {
                attrId: 0,
                id: 0,
                valueName: "string",
              },
            ],
            categoryId: 0,
            categoryLevel: 0,
            id: 0,
          }; */
          await saveAttrInfoApi({
            attrName,
            attrValueList,
            categoryId: this.category3Id,
            categoryLevel: 3,
            id,
          });
          this.$message.info(`${id?'更新':'添加'}成功!!!`);
          this.cancel();
        } else {
          this.$message.info("添加失败!!!");
          return false;
        }
      });
    },
  },
};
</script>

<style></style>
